<template>
  <div class="change_use_info scroll_box" >
    <el-descriptions title="自定义样式列表" :column="1" border>
      <el-descriptions-item label="项目名称" label-class-name="my-label" content-class-name="my-content">{{infoData.Title}}</el-descriptions-item>
      <el-descriptions-item label="利用要素" label-class-name="my-label" content-class-name="my-content">{{infoData.baseInfo}}</el-descriptions-item>
      <el-descriptions-item label="投用时间" label-class-name="my-label" content-class-name="my-content">{{infoData.UseDate}}</el-descriptions-item>
      <el-descriptions-item label="总投资（万元）" label-class-name="my-label" content-class-name="my-content">{{infoData.Money}}</el-descriptions-item>
      <el-descriptions-item label="用地面积（亩）" label-class-name="my-label" content-class-name="my-content">{{infoData.Area}}</el-descriptions-item>
      <el-descriptions-item label="项目类型" label-class-name="my-label" content-class-name="my-content">{{typeList[infoData.Type]}}</el-descriptions-item>
      <el-descriptions-item label="项目状态" label-class-name="my-label" content-class-name="my-content">{{stateList[infoData.State]}}</el-descriptions-item>
      <el-descriptions-item label="项目概况" label-class-name="my-label" content-class-name="my-content">{{infoData.Note}}</el-descriptions-item>
      <el-descriptions-item label="项目图片" label-class-name="my-label" content-class-name="my-content">
        <div class="img_ul">
          <img v-for="(i,index) in infoData.UploadFile" :src="i.url+'?x-oss-process=image/resize,m_fill,w_280,h_280,limit_0'" alt="" :key="index">
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {CHANGE_USE_INFO_TYPE,CHANGE_USE_INFO_STATE} from '../data'

export default {
  name:'ChangeUseInfo',
  data(){
    return{
      infoData:{},
      typeList:CHANGE_USE_INFO_TYPE,
      stateList:CHANGE_USE_INFO_STATE
    }
  },
  props:{
    id:{
      type:String,
      default:''
    }
  },
  mounted(){
    this.getInfoById()
  },
  methods:{
    getInfoById(){
      this.$api.getChangeInfo({
        id:this.id
      }).then(res=>{
        console.log(res)
        let json = res.data.data[0]
        json.baseInfo = ''
        json.UploadFile = JSON.parse(json.UploadFile)
        json.baselist.forEach((i,index)=>{
          json.baseInfo += index+1===json.baselist.length?i.CETitle:i.CETitle+'、'
        })
        this.infoData = json
      })
    }
  }
}
</script>

<style scoped>
.change_use_info{
  padding: 0 50px;
  height: 100%;
}
.img_ul img{
  margin:0 9px ;
}
</style>
